<template>
	<ma-body>
		<ma-refresh slot="content" :safeBottom="false" :refresh="false">
			<div class="big-box">
				<div class="title-box">
					<span class="title-line"></span>
					<div class="input-text">
						<span class="jiu-font30-fff">设置密码</span>
						<span class="jiu-font32-555">请输入8~30位字母数字组合</span>
					</div>
				</div>
				
				<div class="input-box">
					<div class="input-item" style="padding: 6.4vw;">
						<div class="center" style="width: 100%;">
							<span class="jiu-font28-aaa">输入密码</span>
							<input 
							v-model="one" 
							type="password" 
							placeholder="8～30位字符含数字、字母" 
							placeholder-class="jiu-font28-555"
							v-show="!onePass"
							style="width: 100%;font-weight: 300;"/>
							<input
							v-model="one" 
							type="text" 
							placeholder="8～30位字符含数字、字母" 
							placeholder-class="jiu-font28-555" 
							 v-show="onePass"
							 style="width: 100%;font-weight: 300;"
							 maxlength="30"/>
							<!-- <input v-model="one" :type="onePassType" placeholder="8～30位字符含数字、字母" placeholder-class="jiu-font28-555" /> -->
						</div>
						<image src="../../../static/img/noLook.png" mode="aspectFill" class="look-img" v-show="!onePass" @tap="onPass"></image>
						<image src="../../../static/img/look.png" mode="aspectFill" class="look-img" v-show="onePass" @tap="onPass"></image>
					</div>
					<div class="input-item top267" style="padding: 6.4vw;">
						<div class="center">
							<span class="jiu-font28-aaa">再次输入</span>
							<input
							v-model="two"
							type="password"
							placeholder="请再次输入密码"
							placeholder-class="jiu-font28-555" 
							style="width: 100%;font-weight: 300;"
							  v-show="!twoPass"/>
							  <input
							  v-model="two"
							  type="text"
							  placeholder="请再次输入密码"
							  placeholder-class="jiu-font28-555" 
							  style="width: 100%;font-weight: 300;"
							    v-show="twoPass"
								maxlength="30"/>
						</div>
						<image src="../../../static/img/noLook.png" mode="aspectFill" class="look-img" v-show="!twoPass" @tap="onTwoPass"></image>
						<image src="../../../static/img/look.png" mode="aspectFill" class="look-img" v-show="twoPass" @tap="onTwoPass"></image>
					</div>
				</div>
				
			</div>
		</ma-refresh>
		<bottom-box slot="footer">
			<span class="login-btn" @tap="login">登录</span>
		</bottom-box>
	</ma-body>
</template>

<script>
	export default{
		data(){
			return{
				onePass: false,
				onePassType: 'password',
				twoPass: false,
				twoPassType: 'password',
				userPhone: '',
				one: '',
				two: ''
			}
		},
		methods:{
			onPass(){
				this.onePass = !this.onePass;
				this.onePassType = this.onePass ? 'text' : 'password';
			},
			onTwoPass(){
				this.twoPass = !this.twoPass;
				this.twoPassType = this.twoPass ? 'text' : 'password';
			},
			login(){
				if(this.one.length < 8 || this.two.length < 8) return uni.showToast({
					icon: 'none',
					title: '您设置的密码不足八位'
				})
				let data = {
					password: this.two,
					phone: this.userPhone
				};
				this.$u.api.onSetPassword(data).then(res=>{
					uni.switchTab({
						url: '/pages/index/index'
					})
				})
			}
		},
		onLoad(e){
			this.userPhone = e.phone;
		}
	}
</script>

<style lang="scss">
	input{
		font-size: 3.73vw;
	}
	.jiu-font28-555{
		font-weight: 300;
	}
	.jiu-font28-aaa{
		flex-shrink: 0;
		
	}
	.look-img{
		width: 6.4vw;
		height: 6.4vw;
	}
	.center{
		display: flex;
		align-items: center;
	}
	.top267{
		margin-top: 2.67vw;
	}
	.big-box{
		background-color: #000000;
		padding-top: 17.07vw;
		display: flex;
		flex-direction: column;
		position: relative;
		
		.title-box{
			display: flex;
			padding-left: 5.33vw;
			.title-line{
				display: block;
				width: 1.07vw;
				height: 17.07vw;
				border-radius: 12.08vw;
				background: linear-gradient(180deg, #A972FF 0%, #FFCE80 100%);
				margin-right: 3.2vw;
			}
			.input-text{
				display: flex;
				flex-direction: column;
			}
		}
		.input-box{
			margin-top: 12.8vw;
			padding-left: 5.33vw;
			.input-item{
				display: flex;
				align-items: center;
				padding: 4.8vw 5.33vw;
				padding-left: 6.8vw;
				background-color: #1B1B1B;
				border-radius: 12.8vw 0 0 12.8vw;
				font-size: $jiu-font28;
				font-weight: 300;
				color: #FFCE80;
				justify-content: space-between;
				.jiu-font28-aaa{
					width: 15vw;
					margin-right: 4.27vw;
				}
				.send-btn{
					width: 17.07vw;
					line-height: 8.53vw;
					text-align: center;
					border-radius: 5.33vw;
					background-color: #A972FF;
					box-shadow: 0vw 1vw 2vw rgba(71,12,114,0.4800);
					margin-left: 4.27vw;
				}
				input{
					
				}
			}
		}
		.read-text{
			margin-top: 3.47vw;
			padding-left: 5.33vw;
			display: block;
			.jiu-font24-555{
				label{
					color: #FFCE80;
				}
			}
		}
	}
	.login-btn{
		display: block;
		width: 89.33vw;
		line-height: 12.8vw;
		text-align: center;
		background-color: #A972FF;
		box-shadow: 0vw 3vw 5vw rgba(71,12,114,0.4800);
		border-radius: 6.4vw;
		color: #000000;
		font-size: 3.73vw;
		font-weight: 500;
	}
</style>
